<template>
	<view class="goods">
		<view class="complaints_header" :style="{ paddingTop: StatusBar + 'px' }">
			<view class="header_box">
				<view class="header_back" @click="navigateBack()">
					<text class="iconfont icon-Left"></text>
				</view>
				<view class="header_title">我的订单</view>
			</view>
			<view class="header_tab">
				<view class="tab_item" :class="tab_id == item.id ? 'current' : ''" @click="tap_tab(item.id)" v-for="item in tab_list" :key="item.id">
					<text>{{item.text}}</text>
					<view class="item_icon"></view>
				</view>
			</view>
		</view>
		<view class="my_order">
			<mescroll-uni :down="downOption" :up="upOption"  :fixed="false" ref="mescrollRef" @init="mescrollInit"
							@down="downCallback" @up="upCallback">
				<view class="list_item" v-for="item in goods_data" :key="item.id">
					<view class="item_head">
						<view class="head_uid">商品编号：{{item.uid}}</view>
						<view class="head_status">{{select_status(item.status)}}</view>
					</view>
					<view class="item_content">
						<view class="content_image">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="content_message">
							<view class="message_title">{{item.title}}</view>
							<view class="message_system">
								<view class="system_item">#{{item.game_name}}</view>
							</view>
							<view class="message_auto">
								<view class="auto_icon">
									<view class="icon_one">
										<image src="~@/static/all_goods/icon_one.png" mode=""></image>
										<text>可买包赔</text>
									</view>
									<view class="icon_two">
										<image src="~@/static/all_goods/icon_two.png" mode=""></image>
										<text>顶级</text>
									</view>
								</view>
								<view class="auto_price">
									<text>￥</text>
									<text>{{item.price}}</text>
								</view>
							</view>
							
						</view>
					</view>
					<view class="item_btn">
						<!-- <view class="btn_down" v-if="item.status == 3">下架</view>
						<view class="btn_del"  v-if="item.status != 3">删除商品</view> -->
						<view class="btn_right">
							<view class="btn_one" v-if="item.status == 7" @click="navigateTo('serve')">联系客服</view>
							<view class="btn_two"  v-if="item.status != 7" @click="navigateTo('serve')">联系客服</view>
							<view class="btn_two"  v-if="item.status == 7" @click="navigateTo('confirm_order', `?id=${item.goods_id}`)">立即支付</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<u-loading-page bg-color="#FCFCFF" image="../../static/logo.gif"  icon-size="140"  loading-text="正在加载请您耐心等待..."  fontSize="26rpx"  :loading="loading"></u-loading-page>
	</view>
</template>
 
<script>
	import { my_order } from '@/api/user'
	export default {
		data() {
			return {
				loading: true,
				tab_list: [
					{id:0, text: "全部商品"},
					{id:7, text: "待支付"},
					{id:1, text: "交易中"},
					{id:5, text: "已成交"},
					{id:4, text: "已取消"}
				],
				goods_data:[],
				tab_id:0,
				StatusBar: this.StatusBar,
				mescroll: null,
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '更新中 ...', // 加载中的提示文本
					offset: 40,
				},
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- 没有更多了 --', // 没有更多数据的提示文本
					offset: 1,
					noMoreSize: 2,
					empty: {
						icon: '',
						tip: '没有数据，看看其他状态吧~'
					},
					page: {
						num: 1,
						size: 10
					}
				},
				page: 1,
				pageSize: 10,
				total: null, //服务器数量
				localTotal: 0, //本地已经加载数量
			}
		},
		onLoad() {
			this.my_order()
		},
		methods: {
			tap_tab(id){
				this.tab_id = id
				this.mescroll.triggerDownScroll()
			},
			select_status(status){
				let text = '-'
				this.tab_list.forEach(item=> {
					console.log(status, item.id)
					if(status == item.id){
						text = item.text
					}
				})
				return text
			},
			// mescroll组件初始化的回调,可获取到mescroll对象 https://www.mescroll.com/uni.html#options
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				// //全部禁止执行
				this.mescroll.lockDownScroll(true)
				this.mescroll.lockUpScroll(true)
				this.mescroll.removeEmpty()
			},
			async my_order() {
				let param = {
					page: this.page,
					pageSize: this.pageSize,
					status: this.tab_id
				}
			
				let data = await my_order(param)
				this.loading = false
				data = data.data
				if (this.page == 1) {
					this.goods_data = data.list
					this.mescroll.lockDownScroll(false)
					this.mescroll.lockUpScroll(false)
				} else {
					this.goods_data = [...this.goods_data, ...data.list]
				}
				
				this.total = data.page.total
				
				if (this.page == 1) {
					this.localTotal = data.list.length
				} else {
					this.localTotal += data.list.length
				}
		
				this.mescroll.endSuccess(data.list.length, this.localTotal < this.total)
			},
			downCallback() {
				this.page = 1
				this.my_order()
			},
			upCallback(page) {
				this.page += 1
				this.my_order()
			},

		}
	}
</script>
 <style>
	 page {
	 	display: -webkit-box;
	 	width: 100%;
	 	height: 100%;
	 	background: #F7F8FA;
	 }
	  
 </style>
<style  lang="scss" scoped>
	.goods {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.complaints_header {
		background: #fff;
		.header_box {
			display: flex;
			align-items: center;
			padding: 28rpx 32rpx;
			position: relative;
			font-weight: bold;
			.header_back {
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.header_title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.header_tab {
			height: 104rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 56rpx;
			.tab_item {
				font-size: 28rpx;
				color: #6C6C6C;
				margin-right: 48rpx;
				position: relative;
				&.current {
					color: #22150B;
					font-weight: bold;
					.item_icon {
						position: absolute;
						bottom: -8rpx;
						left: 50%;
						transform: translate(-50%, 0);
						width: 48rpx;
						height: 22rpx;
						background: url(~@/static/all_goods/yellow.png) no-repeat;
						background-size: 100%;
					}
					text {
						position: relative;
					}
				}
			}
		}
	}
 
	.my_order {
		flex: 1;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 24rpx 32rpx;
		.list_item {
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 24rpx;
			margin-bottom: 16rpx;
			.item_head {
				display: flex;
				align-items: center;
				.head_uid {
					font-size: 24rpx;
					color: #22150B;
				}
				.head_status {
					margin-left: auto;
					font-size: 24rpx;
					color: #FFB72C;
				}
			}
			.item_content {
				margin-top: 16rpx;
				display: flex;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F3F3F3;
				.content_image {
					width: 160rpx;
					height: 164rpx;
					border-radius: 20rpx;
					overflow: hidden;
					background: #FFB72C;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.content_message {
					margin-left: 16rpx;
					flex: 1;
					.message_title {
						font-size: 24rpx;
						line-height: 30rpx;
						color: #22150B;
						font-weight: bold;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.message_system {
						margin-top: 8rpx;
						display: inline-block;
						.system_item {
							float: left;
							padding: 6rpx 16rpx;
							background: #FFFBEF;
							border-radius: 88rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							color: #995C00;
							margin: 0 8rpx 8rpx 0;
						}
					}
					.message_auto {
						display: flex;
						align-items: center;
						.auto_icon {
							display: flex;
							align-items: center;
							.icon_one {
								margin-right: 8rpx;
								width: 152rpx;
								height: 40rpx;
								background: linear-gradient( 90deg, #FFF3C7 0%, #F79135 100%);
								border-radius: 88rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								image {
									width: 28rpx;
									height: 28rpx;
								}
								text {
									font-size: 20rpx;
									line-height: 20rpx;
									color: #2E2516;
									margin-left: 8rpx;
								}
							}
							.icon_two {
								width: 104rpx;
								height: 40rpx;
								background: linear-gradient( 90deg, #322F23 0%, #A1652E 100%);
								border-radius: 88rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								image {
									width: 28rpx;
									height: 28rpx;
								}
								text {
									font-size: 20rpx;
									line-height: 20rpx;
									color: #FFFCE3;
									margin-left: 8rpx;
								}
							}
						}
						
						.auto_price {
							margin-left: auto;
							display: flex;
							align-items: flex-end;
							text {
								font-weight: bold;
								color: #FF2020;
								&:nth-child(1) {
									line-height: 24rpx;
									font-size: 24rpx;
								}
								&:nth-child(2) {
									line-height: 32rpx;
									font-size: 32rpx;
								}
							}
						}
					}
					
				}
			}
			.item_btn {
				padding-top: 28rpx;
				display: flex;
				align-items: center;
				.btn_down {
					font-size: 24rpx;
					color: #6C6C6C;
				}
				.btn_del {
					width: 160rpx;
					height: 52rpx;
					border-radius: 100rpx;
					border: 2rpx solid #D7D7D7;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #6C6C6C;
				}
				.btn_right {
					margin-left: auto;
					display: flex;
					align-items: center;
				}
				.btn_one {
					margin-left: 12rpx;
					width: 160rpx;
					height: 52rpx;
					background: #F3F3F3;
					border-radius: 100rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #22150B;
				}
				.btn_two {
					margin-left: 12rpx;
					width: 160rpx;
					height: 52rpx;
					background: #FDD637;
					border-radius: 100rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #22150B;
				}
			}
		}
	}
 
	
</style>